<template>
	<view class="calendar">
		<swiper circular current="1" :style="{height:swiperHeight+'px'}" @change="swiperChange">
			<swiper-item v-for="(item,idnex) in 3" :key='idnex'>
				<view class="" id="calendar-box">
					<view class="calendar-nav">
						<view @click="backMonth" class="back">
							<text class=" iconfont icon-a-left2x"></text>
						</view>
						<view class="currentTitle">
							{{currentMonthData.Y}}年 {{currentMonthData.M}}月
						</view>
						<view @click="nextMonth" class="next">
							<text class="next-month iconfont icon-a-right2x"></text>
						</view>
					</view>
					<view class="calendar-week">
						<view v-for="(w,wIndex) in weeks" :key='wIndex' class="week-item">
							周{{w}}
						</view>
					</view>
					<view style="" class="calendar-days">
						<view v-for="(d,dIndex) in currentMonthData.dayNum " :key='dIndex' @click="tabToday(d)"
							:style="{height:dayHeight+'px'}" :id="'dayItem'+dIndex" class="day-item">
							<view class="day" :style=" [currentStyle(d),]">
								{{d.D}}
							</view>
							<view v-if="isSign(d)"
								style="width: 4px;height: 4px;background-color: #14AC69;position: absolute;bottom:0rpx;border-radius: 100%;"
								class="">
							</view>
						</view>
						<!-- 六行 7列   	  42 个 格子 -->
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	//签到列表 ，注意签到格式  ------- 应在切换月时重新赋值当前月签到数据  ,  
	// new Date('2022/7') new Date('2022,7')ios 不可用 ，，newdate 传参获取 月份正常 ，不传参 月份少一

	export default {
		props: {
			//签到数组
			signList: {
				type: Array,
				default () {
					return [] //示例 ：['2022-6-30', '2022-6-29', '2022-6-28']
				}
			},
			//激活样式
			activeDayStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			//多余日期
			freeDayStyle: {
				type: Object,

			},

		},
		computed: {
			//合并传值
			z_activeDayStyle: function() {
				return {
					...this.defaultActiveDayStyle,
					...this.activeDayStyle
				}
			},
			z_freeDayStyle: function() {
				return {
					...this.defaultFreeDayStyle,
					...this.freeDayStyle
				}
			},
			//忘了干嘛的
			// dataList: function() {
			// 	return [this.backMonthData, this.currentMonthData, this.nextMonthData]
			// }
		},
		data() {
			return {
				defaultActiveDayStyle: {
					backgroundColor: '#14AC69',
					color: '#fff'
				},
				defaultFreeDayStyle: {
					color: '#969799',
				},
				swiperHeight: 0, //swiper高度,mounted获取
				dayHeight: 0, //单个日子高度,mounted获取
				swiperIndex: 1,
				currentdate: '', //当前日期，
				currentMonthData: {}, //选择后的数据
				weeks: ['一', '二', '三', '四', '五', '六', '日'],
				// Y: '', //年
				// M: '', //月
				// W: '', //周
				// D: '', //日
				// H: '', //时
				// Min: '', //分
				// S: '' //秒
			}
		},

		created() {
			this.currentdate = this.getdate()
			this.currentMonthData = this.currentdate

		},
		mounted() {
			//给swiper高度，给每个天高度
			const query = uni.createSelectorQuery().in(this);
			query.select('#dayItem1').boundingClientRect(data => {
				this.dayHeight = data.width
			}).exec();
			this.$nextTick(() => {
				query.select('#calendar-box').boundingClientRect(data => {
					this.swiperHeight = data.height
				}).exec();
			})
		},
		methods: {
			//是否签到
			isSign(d) {
				if (!d.notCurrentMonth) {
					return this.signList.some(e => {
						let day = e.statement_day.split('-')
						return d.Y == day[0] && d.M == day[1] && d.D == day[2]
					})
				}
			},
			// 点击日历切换
			tabToday(d) {
				if (!d.notCurrentMonth) {
					this.currentdate = d
					this.$emit('click', d)
				}
			},
			swiperChange(e) {
				if (e.detail.current - this.swiperIndex == 1 || e.detail.current - this.swiperIndex == -2) {
					this.nextMonth()
				} else {
					this.backMonth()
				}
				this.swiperIndex = e.detail.current
			},
			currentStyle(d) {
				if (d.Y == this.currentdate.Y && d.M == this.currentdate.M && d.D == this.currentdate.D & !d
					.notCurrentMonth) {
					return this.z_activeDayStyle
				}
				if (d.notCurrentMonth) {
					return this.z_freeDayStyle
				}
			},
			getdate(e) {
				let date = e ? new Date(...arguments) : new Date()
				// 获取月信息
				let dateObj = {}
				dateObj.Y = date.getFullYear()
				dateObj.M = date.getMonth() + 1
				dateObj.W = date.getDay() == 0 ? 7 : date.getDay() == 0
				dateObj.D = date.getDate()
				// dateObj.H = date.getHours()
				// dateObj.Min = date.getMinutes()
				// dateObj.S = date.getSeconds()
				dateObj.days = new Date(dateObj.Y, dateObj.M, 0).getDate()
				dateObj.dayNum = [] //月天数信息
				//月天数信息
				for (let i = 1; i <= dateObj.days; i++) {
					let day = {
						Y: dateObj.Y,
						M: dateObj.M,
						D: i,
					}
					dateObj.dayNum.push(day)
				}
				//获取当月周几开始
				dateObj.startWeek = new Date(dateObj.Y, dateObj.M - 1, 0).getDay()
				//获取当月周几结束（未用）
				dateObj.endWeek = new Date(dateObj.Y, dateObj.M - 1, dateObj.days).getDay()
				//获取上个月最后一天
				dateObj.backMonthDay = new Date(dateObj.Y, dateObj.M - 1, 0).getDate()
				//添加上月
				for (let i = 0; i < dateObj.startWeek; i++) {
					let day = {
						Y: dateObj.M - 1 == 0 ? dateObj.Y - 1 : dateObj.Y,
						M: dateObj.M - 1 == 0 ? '12' : dateObj.M - 1,
						D: dateObj.backMonthDay - i,
						notCurrentMonth: true
					}
					dateObj.dayNum.unshift(day)
				}
				//增加剩余天数
				let dateObjLength = dateObj.dayNum.length
				for (let i = 1; i <= 42 - dateObjLength; i++) {
					let day = {
						Y: dateObj.M + 1 == 13 ? dateObj.Y + 1 : dateObj.Y,
						M: dateObj.M + 1 == 13 ? '1' : dateObj.M + 1,
						D: i,
						notCurrentMonth: true
					}
					dateObj.dayNum.push(day)
				}

				return dateObj
			},
			//对月 进行处理 ，本来想在这里 获取  前月 后月
			getNCN(M) {
				let inY = this.currentMonthData.Y
				let inM = M
				if (M == 0) {

					inY = this.currentMonthData.Y - 1
					inM = 12
				}
				if (M == 13) {
					inY = this.currentMonthData.Y + 1
					inM = 1
				}
				return this.getdate(inY, inM - 1)

			},
			backMonth() {
				this.currentMonthData = this.getNCN(
					this.currentMonthData.M - 1
				)
			},
			nextMonth() {
				this.currentMonthData = this.getNCN(
					this.currentMonthData.M + 1
				)

			},
			prefix(num) {
				return num < 10 ? '0' + num : num
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./fonts/iconfont.css";

	.calendar {
		width: 100%;
	}

	.calendar-nav {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 32rpx;

		.back {}

		.currentTitle {
			font-weight: 600;
			font-size: 32rpx;
		}

		.next {}
	}

	.calendar-week {
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;

		.week-item {
			flex: 1;
			text-align: center;
			color: #999999;
			font-size: 24rpx;
		}
	}

	.calendar-days {
		display: grid;
		grid-template-columns: repeat(7, 1fr);

		.day-item {
			position: relative;
			// border: 1px solid green;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;

			.day {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>
